<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>进程管理</title>
    <link rel="stylesheet" href="css/logistics.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
</head>

<body>
    <!-- select 模板 -->
    <template id="multiselect">
        <div class="multiselect-style">
            <input type="text" :placeholder="selectData.tip" readonly>
            <i class="fa fa-angle-down"></i>
            <ul>
                <li v-for="opt in selectData.options">
                    <input type="checkbox">
                    <span v-text="opt.text"></span>
                </li>
            </ul>
        </div>
    </template>
    <!-- select 模板 end -->
    <div class="all-contain" id="qiein-app">
        <!-- 头部样式 -->
        <header class="qiein-head">
            <div class="qiein-logo">
                <img src="img/qiein-logo.png" alt="">
            </div>
            <!-- 头部导航 -->
            <div class="head-nav">
                物流信息<i class="fa fa-angle-down"></i>
                <div class="head-nav-ul-wrap">
                    <ul>
                        <li>物流信息</li>
                        <li>物流财务</li>
                        <li>物流大数据</li>
                        <li>物流信息</li>
                    </ul>
                </div>
            </div>
            <!-- 头部搜索 -->
            <div class="head-search">
                <div>
                    <i class="fa fa-search"></i>
                    <input type="text">
                </div>
            </div>
            <!-- 头部提示 -->
            <div class="head-prompt">
                <i class="fa fa-bell"></i>
                <span>1</span>
            </div>
            <div class="login-user">
                <span><i class="fa fa-user"></i></span>
                <div>超级管理员</div>
            </div>
        </header>
        <!-- 头部样式 end-->
        <div class="qiein-search">
            <!-- 第一个 -->
            <div class="search-col borderR">
                <!-- 时间选项 -->
                <div class="time-opt">
                    <div class="select-style">
                        <input type="text" placeholder="时间选择" readonly>
                        <ul>
                            <li>预约时间</li>
                            <li>发片时间</li>
                            <li>回件时间</li>
                            <li>打包时间</li>
                            <li>发货时间</li>
                        </ul>
                    </div>
                </div>
                <div class="time-start-end">
                    <input type="text" placeholder="开始时间">
                    <input type="text" placeholder="结束时间">
                </div>
                <!-- 搜索时间按钮样式 -->
                <div class="search-time-wrap">
                    <button class="btn">搜索</button>
                    <span class="c1"><i class="fa fa-filter"></i><div class="search-time-ul-wrap">
                        <ul>
                            <li>今日</li>
                            <li>昨日</li>
                            <li>本周</li>
                            <li>上周</li>
                            <li>本月</li>
                            <li>上月</li>
                        </ul>
                    </div></span>
                </div>
                <!-- 搜索时间按钮样式 end -->
            </div>
            <!-- 第一个 end -->
            <!-- 第二个 -->
            <div class="search-col  borderR">
                <!-- 供应商选择 -->
                <supplier-select :select-data="supplierSelect"></supplier-select>
            </div>
            <!-- 第二个 end-->
            <!-- 第三个 -->
            <div class="search-col  borderR">
                <!-- 物流状态选择 -->
                <logistics-status-select :select-data="logisticsStatusSelect">
                </logistics-status-select>
                <logistics-type-select :select-data="logisticsTypeSelect" class="marginT-2x">
                </logistics-type-select>
            </div>
            <!-- 第三个end -->
            <!-- 第四个 -->
            <div class="search-col operation-ul-wrap">
                <ul>
                    <li><span><i class="fa fa-plus"></i></span><span>录入</span></li>
                    <li><span><i class="fa fa-times"></i></span><span>删除</span></li>
                    <li><span><i class="fa fa-sign-out"></i></span><span>导出</span></li>
                    <li><span><i class="fa fa-refresh"></i></span><span>刷新</span></li>
                </ul>
            </div>
            <!-- 第四个end -->
        </div>
        <!--tab开始  -->
        <div class="tab-style" id="tab_vue">
            <ul>
                <li v-for='(tab,index) in tabs' @click='changeTab(index)' :class="{'tab-active': index === isActive}"><span v-text="tab.text"></span>(<span v-text="tab.value"></span>)</li>
            </ul>
        </div>
        <!-- tab结束  -->
        <div class="table-wrap" id="table_vue">
            <div class="table-thead" @scroll="tableHeadScroll(event)" ref="table-thead">
                <table class="table-style">
                    <!-- 表头的遍历（固定的表头） -->
                    <thead>
                        <tr>
                            <th v-for="(tableHead,index) in tableHeads">
                                <!-- 如果可排序 -->
                                <div :style="{width:tableHead._width}" v-if="tableHead.sortAble">
                                    <span v-text="tableHead.text"></span>
                                    <i class="fa fa-angle-down" @click="tableHead.asc=!tableHead.asc" :style="{transform:tableHead.asc?'':'rotate(180deg)'}"></i>
                                </div>
                                <!-- 不可排序 -->
                                <div :style="{width:tableHead._width}" v-else>
                                    <span v-text="tableHead.text"></span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- table样式  开始 -->
            <div class="table-tbody" @scroll="tableBodyScroll(event)" ref="table-tbody">
                <table class="table-style" id="table1">
                    <thead>
                        <!-- 表头的遍历(真实表头，实际是隐藏的) -->
                        <tr>
                            <th v-for="(tableHead,index) in tableHeads">
                                <span v-text="tableHead.text"></span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 表格数据渲染 -->
                        <tr v-for="x in 0">
                            <td v-for="y in 16">{{x+y-1}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- table样式  结束 -->
        </div>
        <!-- 表格样式结束 -->
        <!-- 分页样式开始 -->
        <div class="pagination-style">
            <div class="pages-info">
                共<span v-text="totalPage"></span>页<span v-text="totalRecords"></span>条, 当前第
                <span v-text="start+1"></span>页
            </div>
            <div class="page-length">
                每页显示
                <select name="" id="" v-model="pageLen">
                    <option v-for="option in pageLen_options" v-bind:value="option.value" v-text="option.text">
                    </option>
                </select>
                条
            </div>
            <div class="up-down-page">
                <button @click="forwardPage()">上一页</button>
                <button @click="nextPage()">下一页</button>
            </div>
            <div class="turn-page">
                跳至
                <input type="text">页
                <button>Go</button>
            </div>
        </div>
        <!-- 分页样式结束 -->
    </div>
</body>
<script>
$(function() {
    //定义表格可拖动列宽
    //$("table").colResizable({});
    // $("table").colResizable({ resizeMode:'overflow'});


    $('.table-tbody').scroll(function(event) {
        //console.log($('.table-thead').scrollLeft());
        //$('.table-thead').scrollLeft($(this).scrollLeft());
    });
    $(document).click(function(event) {
        /* Act on the event */
        // 判断当前点击的元素是否是select或者select底下的元素，不是则隐藏所有已展开的select
        let judge1 = $(event.target).parents().hasClass('multiselect-style');
        if (!judge1) {
            $('.multiselect-style ul').slideUp(120);
            $('.multiselect-style>input').removeClass('multiselect-style-active');
            $('.multiselect-style>i').css('transform', 'rotate(0deg)');
        }

        let judge2 = $(event.target).parents().hasClass('select-style');
        if (!judge2) {
            $('.select-style ul').slideUp(120);
            //$('.multiselect-style>i').css('transform','rotate(0deg)');
        }

    });
    //自定义select样式的事件
    $('.select-style>input').on('click', function(event) {
        if ($(this).nextAll('ul').css('display') == 'block') {
            $(this).nextAll('ul').slideUp(120);
            return;
        }
        $('.select-style ul').slideUp(120);
        $(this).nextAll('ul').slideDown(120);
    });
    $('.select-style ul li').on('click', function(event) {
        $(this).parent('ul').slideUp(120);
        $(this).parent('ul').prev('input').val($(this).text());
    });
    //自定义multiselect样式的事件
    $('.multiselect-style>input').on('click', function(event) {
        if ($(this).nextAll('ul').css('display') == 'block') {
            $(this).nextAll('ul').slideUp(120);
            $(this).nextAll('i').css('transform', 'rotate(0deg)');
            $(this).removeClass('multiselect-style-active');
            return;
        };
        //把其余的先关闭
        $('.multiselect-style>ul').slideUp(120);
        $('.multiselect-style>input').removeClass('multiselect-style-active');
        $('.multiselect-style>i').css('transform', 'rotate(0deg)');
        $(this).nextAll('ul').slideDown(120);
        //设计当前点击的样式
        $(this).nextAll('i').css('transform', 'rotate(180deg)');
        $(this).addClass('multiselect-style-active');
    });

    $('.multiselect-style>ul li').on('click', function(event) {
        let _check = $(this).find('input[type="checkbox"]')[0].checked;
        $(this).find('input[type="checkbox"]')[0].checked = !_check;

    });
    $('.multiselect-style>ul>li>input').on('click', function(event) {
        let _check = this.checked;
        this.checked = !_check;
    });
});
// var supplierSelect = Vue.extend({
//     template: "#multiselect",
//     data: function() {
//         return {
//             tip: '',
//             options: [{
//                 text: ''
//             }]
//         };
//     },
// });
// var multiselect2 = Vue.extend({
//     template: "#multiselect",
//     data: function() {
//         return {
//             tip: '',
//             options: [{
//                 text: ''
//             }]
//         };
//     },
// });
// Vue.component('supplier-select', {
//     template: "#multiselect",
//     data: function() {
//         return {
//             tip: '',
//             options: [{
//                 text: ''
//             }]
//         };
//     },
// });

//相关配置
var qieinApp = new Vue({
    el: '#qiein-app',
    data: {
        //配置tab选项
        isActive: 0,
        tabs: [{
            id: 'tab1', //选项ID ，可不填
            name: '',
            text: '全部', //展示文字
            value: '143' //数量
        }, {
            id: 'tab2',
            name: '',
            text: '已回收',
            value: '10'
        }, {
            id: 'tab2',
            name: '',
            text: '已打包',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '已发货',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '危险件',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '加急件',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '返工件',
            value: '0'
        }],
        //供应商选择
        supplierSelect: {
            id: '',
            name: '',
            tip: '供应商选择',
            options: [{
                id: '',
                name: '',
                text: '全部供应商'
            }, {
                id: '',
                name: '',
                text: '金夫人'
            }, {
                id: '',
                name: '',
                text: '丰色'
            }, {
                id: '',
                name: '',
                text: '海龙'
            }, {
                id: '',
                name: '',
                text: '汉江'
            }, {
                id: '',
                name: '',
                text: '浩然'
            }]
        },
        //物流状态
        logisticsStatusSelect: {
            id: '',
            name: '',
            tip: '物流状态',
            options: [{
                id: '',
                name: '',
                text: '已发片'
            }, {
                id: '',
                name: '',
                text: '已经回件'
            }, {
                id: '',
                name: '',
                text: '已打包'
            }, {
                id: '',
                name: '',
                text: '已发货'
            }]
        },
        //物流方式选择
        logisticsTypeSelect: {
            id: '',
            name: '',
            tip: '物流方式',
            options: [{
                id: '',
                name: '',
                text: '邮寄'
            }, {
                id: '',
                name: '',
                text: '自取'
            }, {
                id: '',
                name: '',
                text: '已打包'
            }, {
                id: '',
                name: '',
                text: '我方送达'
            }]
        },
        //table表头
        tableHeads: [{
            id: '',
            name: '', //对应的字段名称
            text: '预约取件时间', //名字
            sortAble: true, //是否可排序
            filterAble: false, //是否可过滤
            asc: true, //排序规则
            _width: '', //主要为了实现固定表头，和下面的隐藏真实表头的width相对应
        }, {
            id: '',
            name: '',
            text: '顾客',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '电话',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '地址',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '物件名',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '供应商',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '回件日',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '物流方式',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '发片日',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '打包日',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '发货日',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '物流状态',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '特殊属性',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '备注',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '仓库',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }, {
            id: '',
            name: '',
            text: '物件id',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
        }],
        //第几页
        start: 0,
        //总记录数
        totalRecords: 10,
        //总页数
        totalPage: 2,
        //分页大小
        pageLen: 50,
        //分页选项
        pageLen_options: [{
            text: '50',
            value: 50
        }, {
            text: '100',
            value: 100
        }, {
            text: '200',
            value: 200
        }],
        //搜索条件
        contiditon: []
    },
    created: function() {
        //页面创建时，请求后台
        this.getData();
    },
    mounted: function() {
        //页面载入完毕，开始固定表头
        this.creatFixHead();
    },
    updated: function() {
        //页面重新渲染，重新开始固定表头
        setTimeout(this.creatFixHead);
    },
    components: {
        'supplier-select': {
            template: '#multiselect',
            props: ['select-data']
        },
        'logistics-status-select': {
            template: '#multiselect',
            props: ['select-data']
        },
        'logistics-type-select':{
            template: '#multiselect',
            props: ['select-data']
        }
    },
    methods: {
        //tab切换
        changeTab: function(index) {
            this.isActive = index;
        },
        //创建固定表头
        creatFixHead: function() {
            let _ths = this.$refs['table-tbody'].querySelectorAll('thead th');
            //遍历真实表头的每个th的宽度，让实际展示的固定表头的宽度和它相等
            for (var i = 0; i < _ths.length; i++) {
                this.tableHeads[i]['_width'] = _ths.item(i).scrollWidth + 'px';
            }
        },
        //表格滚动事件
        tableHeadScroll: function(e) {
            this.$refs['table-tbody'].scrollLeft = e.target.scrollLeft;
        },
        tableBodyScroll: function(e) {
            this.$refs['table-thead'].scrollLeft = e.target.scrollLeft;

        },
        getData: function() {
            //获取数据

        },
        forwardPage: function() {
            //前一页
            if (this.start > 0) {
                this.start -= 1;
                this.getData();
            }
        },
        nextPage: function() {
            //后一页
            if (this.start + 1 < this.totalPage) {
                this.start += 1;
                this.getData();
            }
        },
        pagination: function() {
            //分页
            var a = this.totalRecords % this.pageLen;
            if (a == 0) {
                this.totalPage = this.totalRecords / this.pageLen;
            } else {
                this.totalPage = parseInt(this.totalRecords / this.pageLen) + 1;
            }
        }
    }
});
</script>

</html>
